<template>
	<scroll-view class="vip-list-container" :enable-flex="true" :scroll-x="true">
		<view class="vip-list-item" v-for="item in qualityData" :key="item._id">
			<view class="food-info">
				<image :src="item.imagePath" mode="" class="foodImg"></image>
				<text>{{ item.name }}</text>
				<view class="flex-bt">
					<view class="product-info">
						<text>180.0万</text>
						<image src="/static/mengbanzu278.png" class="watch-img"></image>
					</view>
					<view class="product-info">
						<text>3.9万</text>
						<image src="/static/mengbanzu279(1).png" class="collect-img"></image>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getQualityApi
	} from '../../../api/cookbook';

	const qualityData = ref([]);
	onMounted(() => {
		getQualityData();
	})

	function getQualityData() {
		getQualityApi().then(res => {
			if (res.code == 200) {
				qualityData.value = res.data;
			}
		})
	}
</script>

<style scoped lang="scss">
	.vip-list-container {
		white-space: nowrap;
		margin-top: 16rpx;
		margin-bottom: 40rpx;
	}

	.vip-list-item {
		display: inline-block;
		flex-shrink: 0;
		height: 324rpx;
		width: 316rpx;
		margin-right: 20rpx;

		.foodImg {
			width: 316rpx;
			height: 220rpx;
			border-radius: 8rpx;
		}
	}

	.food-info {
		display: flex;
		flex-direction: column;
	}

	.product-info {
		font-size: 22rpx;
		color: #aaaaaa;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.watch-img {
		margin-left: 5rpx;
		width: 28rpx;
		height: 22rpx;
	}

	.collect-img {
		margin-left: 5rpx;
		width: 24rpx;
		height: 24rpx;
	}
	body ::-webkit-scrollbar {
		display: none;
	}
</style>